<template>
  <div class="home" id="home">
    <el-container id="el-container">
      <el-header>
        <div>VISUALIZATION-SYSTEM</div>
        <input type="file" name="upload" id="upload" ref="files" @change="ChangeFiles" style="display: none;"/>
        <div id="uploadfiles" class="el-icon-plus" @drop="OnDropFiles" @click="uploadFiles">请拖入文件</div>
        <div>
          <el-button type="primary" icon="el-icon-setting" size="mini" @click="globalSetting">全局设置</el-button>
          <el-button type="primary" icon="el-icon-s-opportunity" size="mini" @click="PreviewHtmlValue('html')">预览Html</el-button>
          <el-button type="primary" icon="el-icon-s-opportunity" size="mini" @click="PreviewXmlValue('checkxml')">预览XML</el-button>
          <el-button type="primary" icon="el-icon-s-opportunity" size="mini" @click="PreviewXmlValue('checkproperties')">预览properties</el-button>
          <el-button type="primary" icon="el-icon-download" size="mini" @click="DownloadFiles('xml')">xml</el-button>
          <el-button type="primary" icon="el-icon-download" size="mini" @click="DownloadFiles('properties')">properties</el-button>
        </div>
      </el-header>
      <el-container>
        <el-aside width="300px" id="left-menu">
          <!-- 组件-导航 -->
          <el-menu default-active="1" :default-openeds="['1','2']" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>Layout | 布局框</span>
              </template>
              <el-menu-item-group>
                <div class="el-menu-item layout-bar" v-for="item in layoutBoxArr" :key="item.id">
                  <el-input v-model="item.name" size="mini" placeholder="请输入分割值" @input="CheckLayoutBoxArray($event, item)"></el-input>
                  <div class="layout-bar-btn" v-if="item.isDrag" :draggable="true" :data-txt="'Layout|'+item.name" @dragstart="MenuDragstart"><i class="el-icon-thumb"></i></div>
                </div>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>Components | 组件库</span>
              </template>
              <el-menu-item-group>
                <li class="el-menu-item" v-for="item in layoutComponentsArr" :key="item.id" style="color: #fff;" :draggable="true" :data-txt="'Components|'+item.type" @dragstart="ComponentsDragstart">{{item.label}}</li>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>Forms | 表单库</span>
              </template>
              <el-menu-item-group>
                <li class="el-menu-item" v-for="item in layoutInputsArr" :key="item.id" style="color: #fff;" :draggable="true" :data-txt="'Components|'+item.type" @dragstart="ComponentsDragstart">{{item.label}}</li>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <div id="wrapper" data-type="LayoutBox" @click="OpenGlobalSetting" :draggable="false" @dragover="DragingOverWrapper" @dragleave="DragLeaveWrapper" @drop="OnDropWrapper"></div>
        </el-main>
        <div id="workspace" class="workspace">
          <!-- 控制台 -->
          <div class="workspace-header">工作区</div>
          <!--全局设置-->
          <div class="drawer-box" v-if="settingDrawer">
            <el-tabs type="card" v-model="tabActiveNameGlobal">
              <el-tab-pane label="页面" name="page">
                <div class="keywords-header">
                  <el-form ref="form" :model="globalSettingObj" label-width="120px" size="mini">
                    <el-form-item label="页面名称(英)">
                      <el-input v-model="globalSettingObj.page" placeholder="en"></el-input>
                    </el-form-item>
                    <el-form-item label="页面名称(中)">
                      <el-input v-model="globalSettingObj.pageZh" placeholder="zh"></el-input>
                    </el-form-item>
                    <el-form-item label="页面宽度">
                      <el-input-number v-model="globalSettingObj.width" :min="0" :max="9999" label="宽"></el-input-number>
                    </el-form-item>
                    <el-form-item label="页面高度">
                      <el-input-number v-model="globalSettingObj.height" :min="0" :max="9999" label="高"></el-input-number>
                    </el-form-item>
                    <el-form-item label="页面对象">
                      <el-input v-model="globalSettingObj.entityClass"></el-input>
                    </el-form-item>
                    <el-form-item label="自动刷新">
                      <el-switch v-model="globalSettingObj.autoQuery"></el-switch>
                    </el-form-item>
                    <el-form-item label="页面类型">
                      <el-radio-group v-model="globalSettingObj.pageType" size="mini" id="page-type">
                        <el-radio border label="maintainPage">Maintain</el-radio>
                        <el-radio border label="editPage">Edit</el-radio>
                        <el-radio border label="modifyDetailPage">ModifyDetail</el-radio>
                        <el-radio border label="modifyMultiDetailPage">ModifyMultiDetail</el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item label="关闭页面" v-if="globalSettingObj.pageType !== 'maintainPage'">
                      <el-input v-model="globalSettingObj.onClose" placeholder="关闭"></el-input>
                    </el-form-item>
                  </el-form>
                </div>
              </el-tab-pane>
              <el-tab-pane label="WF" name="Wf">WF</el-tab-pane>
              <el-tab-pane label="Process" name="Process">Process</el-tab-pane>
            </el-tabs>
          </div>
          <!--table设置-->
          <div class="drawer-box" v-if="tableDrawer">
            <el-tabs type="card" v-model="tabActiveNameTable">
              <el-tab-pane label="字段" name="field">
                <div class="keywords-header">
                  <div class="keywords-header-btns">
                    <el-button size="mini" round @click="ConversionKeywords">转化字段</el-button>
                    <el-button size="mini" round @click="AddKeywords">添加字段</el-button>
                  </div>
                  <el-form :model="whichTable" size="mini">
                    <el-form-item>
                      <el-col :span="6">标签字段：</el-col>
                      <el-col :span="6">
                        <el-form-item>
                          <el-input v-model="whichTable.tabsPorp" placeholder="Tab字段" size="mini"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="6">标签名：</el-col>
                      <el-col :span="6">
                        <el-form-item>
                          <el-input v-model="whichTable.tabsLabel" placeholder="国际化" size="mini"></el-input>
                        </el-form-item>
                      </el-col>
                    </el-form-item>
                  </el-form>
                  <el-input
                    type="textarea"
                    placeholder="请输入内容"
                    v-model="keywordsTextarea"
                    rows="6"
                    show-word-limit
                  >
                  </el-input>
                </div>
                <div class="keywords-footer">
                  <el-form :model="whichTable" size="mini">
                    <el-form-item v-for="(item, index) in whichTable.columns" :key="item.id">
                      <el-col :span="8">
                        <el-form-item>
                          <el-input v-model="item.prop" placeholder="英文字段"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="2">-</el-col>
                      <el-col :span="8">
                        <el-form-item>
                          <el-input v-model="item.label" placeholder="国际化"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="6">
                        <el-form-item>
                          <div class="field-btns">
                            <el-button type="primary" icon="el-icon-edit" @click="editField('fieldManagent', item.prop, 'table')" circle></el-button>
                            <el-button type="danger" icon="el-icon-delete" circle @click="DeleteField(index)"></el-button>
                          </div>
                        </el-form-item>
                      </el-col>
                    </el-form-item>
                  </el-form>
                </div>
              </el-tab-pane>
              <el-tab-pane label="字段管理" name="fieldManagent">
                <div class="keywords-header">
                  <el-select v-model="keywordsManagement" clearable filterable placeholder="请选择" @change="ChangeKeywordsManagement">
                    <el-option
                      v-for="item in whichTable.columns"
                      :key="item.prop"
                      :label="item.label"
                      :value="item.prop">
                    </el-option>
                  </el-select>
                </div>
                <div class="keywords-footer">
                  <el-form ref="form" :model="keywordsManagementObj" label-width="100px" size="mini" v-if="keywordsManagementObj.prop">
                    <el-form-item label="字段名(英)">
                      <el-input v-model="keywordsManagementObj.prop"></el-input>
                    </el-form-item>
                    <el-form-item label="字段名(中)">
                      <el-input v-model="keywordsManagementObj.label"></el-input>
                    </el-form-item>
                    <el-form-item label="宽度">
                      <el-input v-model="keywordsManagementObj.width"></el-input>
                    </el-form-item>
                    <el-form-item label="是否可见">
                      <el-switch v-model="keywordsManagementObj.visible"></el-switch>
                    </el-form-item>
                    <el-form-item label="是否排序">
                      <el-switch v-model="keywordsManagementObj.sortable"></el-switch>
                    </el-form-item>
                    <el-form-item label="语言">
                      <el-switch v-model="keywordsManagementObj.language"></el-switch>
                    </el-form-item>
                    <el-form-item label="水平对齐">
                      <el-radio-group v-model="keywordsManagementObj.horizonAlign">
                        <el-radio label="left">左</el-radio>
                        <el-radio label="center">中</el-radio>
                        <el-radio label="right">右</el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item label="垂直对齐">
                      <el-radio-group v-model="keywordsManagementObj.verticalAlign">
                        <el-radio label="top">上</el-radio>
                        <el-radio label="middle">中</el-radio>
                        <el-radio label="bottom">下</el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item label="数据类型">
                      <el-select v-model="keywordsManagementObj.dataType" placeholder="请选择" @change="ChangeKeywordsManagementObj($event, keywordsManagementObj)">
                        <el-option
                          v-for="item in dataTypeOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="Format">
                      <el-input v-model="keywordsManagementObj.format"></el-input>
                    </el-form-item>
                    <el-form-item label="FormatParam">
                      <el-input v-model="keywordsManagementObj.formatParam"></el-input>
                    </el-form-item>
                  </el-form>
                </div>
              </el-tab-pane>
              <el-tab-pane label="HSQL" name="hsql">
                <div class="keywords-header">
                  <el-input
                    type="textarea"
                    placeholder="请写入hsql语句"
                    v-model="whichTable.keywordsTextareaHsql"
                    rows="25"
                    show-word-limit
                  >
                  </el-input>
                  <el-button size="mini" class="margin-top-hr" round @click="ParsingFields">解析字段</el-button>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
          <!--form设置-->
          <div class="drawer-box" v-if="formDrawer">
            <el-tabs type="card" v-model="tabActiveNameForm">
              <el-tab-pane label="表单全局" name="formGlobal">
                <el-form ref="form">
                  <el-form-item label="控件默认列数">
                    <el-input-number v-model="whichTable.row" controls-position="right" @change="handleChangeDefaultRow($event, $event, 'row')" :min="1" :max="10"></el-input-number>
                  </el-form-item>
                  <!-- <el-form-item label="控件默认宽度">
                    <el-input-number v-model="whichTable.formComWidth" controls-position="right" @change="handleChangeDefaultComWidth($event, $event, 'row')"></el-input-number>
                  </el-form-item> -->
                  <el-form-item label="控件默认宽度">
                    <el-input-number v-model="whichTable.inputComWidth" controls-position="right" @change="handleChangeDefaultComWidth($event, $event, 'row')" :min="180" :max="250"></el-input-number>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
              <el-tab-pane label="表单字段" name="field">
                <div class="keywords-header">
                  <div class="keywords-header-btns">
                    <el-button size="mini" round @click="ConversionForms">转化表单</el-button>
                    <el-dropdown split-button @command="handleCommand" trigger="click">
                      <span class="el-dropdown-link">
                        添加表单
                      </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="text">text</el-dropdown-item>
                        <el-dropdown-item command="numberText">numberText</el-dropdown-item>
                        <el-dropdown-item command="date">Date</el-dropdown-item>
                        <el-dropdown-item command="textarea">textarea</el-dropdown-item>
                        <el-dropdown-item command="remote">remote</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </div>
                  <el-input
                    type="textarea"
                    placeholder="请输入内容"
                    v-model="conversionFormKeywordsTextarea"
                    rows="6"
                    show-word-limit
                  >
                  </el-input>
                </div>
                <div class="keywords-footer">
                  <el-form :model="whichTable" size="mini">
                    <el-form-item v-for="(item, index) in whichTable.forms" :key="item.id">
                      <el-col :span="8">
                        <el-form-item>
                          <el-input v-model="item.field" placeholder="字段名"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="2">-</el-col>
                      <el-col :span="8">
                        <el-form-item>
                          <el-input v-model="item.label" placeholder="国际化"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="6">
                        <el-form-item>
                          <div class="field-btns">
                            <el-button type="primary" icon="el-icon-edit" @click="editField('fieldManagent', item.field, 'form')" circle></el-button>
                            <el-button type="danger" icon="el-icon-delete" circle @click="DeleteFormField(index)"></el-button>
                          </div>
                        </el-form-item>
                      </el-col>
                    </el-form-item>
                  </el-form>
                </div>
              </el-tab-pane>
              <el-tab-pane label="表单字段管理" name="fieldManagent">
                <div class="keywords-header">
                  <el-select v-model="keywordsManagementForm" clearable filterable placeholder="请选择" @change="ChangeKeywordsManagementForms">
                    <el-option
                      v-for="item in whichTable.forms"
                      :key="item.field"
                      :label="item.label"
                      :value="item.field">
                    </el-option>
                  </el-select>
                </div>
                <div class="keywords-footer">
                  <el-form ref="form" :model="keywordsManagementFormObj" label-width="100px" size="mini" v-if="keywordsManagementFormObj.field">
                    <el-form-item label="字段名(英)">
                      <el-input v-model="keywordsManagementFormObj.field"></el-input>
                    </el-form-item>
                    <el-form-item label="字段名(中)">
                      <el-input v-model="keywordsManagementFormObj.label"></el-input>
                    </el-form-item>
                    <el-form-item label="row">
                      <el-input-number v-model="keywordsManagementFormObj.row" controls-position="right" @change="handleChangeKeywordsManagementFormObj($event,$event, 'row')" :min="1" :max="10"></el-input-number>
                    </el-form-item>
                    <el-form-item label="col">
                      <el-input-number v-model="keywordsManagementFormObj.col" controls-position="right" @change="handleChangeKeywordsManagementFormObj($event,$event, 'col')" :min="1" :max="10"></el-input-number>
                    </el-form-item>
                    <el-form-item label="span">
                      <el-input-number v-model="keywordsManagementFormObj.span" controls-position="right" @change="handleChangeKeywordsManagementFormObj($event,$event, 'span')" :min="1" :max="10"></el-input-number>
                    </el-form-item>
                    <el-form-item label="类型">
                      <el-select v-model="keywordsManagementFormObj.type" placeholder="请选择类型" @change="ChangeKeywordsManagementFormObj($event, keywordsManagementObj)">
                        <el-option
                          v-for="item in inputTypeOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="是否只读">
                      <el-switch v-model="keywordsManagementFormObj.readOnly"></el-switch>
                    </el-form-item>
                    <el-form-item label="是否必填">
                      <el-switch v-model="keywordsManagementFormObj.required" @change="isRequired"></el-switch>
                    </el-form-item>
                    <el-form-item label="是否重置控件">
                      <el-switch v-model="keywordsManagementFormObj.reserve"></el-switch>
                    </el-form-item>
                    <el-form-item label="是否强制更新">
                      <el-switch v-model="keywordsManagementFormObj.forceOverride"></el-switch>
                    </el-form-item>
                    <el-form-item label="是否聚焦">
                      <el-switch v-model="keywordsManagementFormObj.focusUI"></el-switch>
                    </el-form-item>
                    <el-form-item label="是否隐藏">
                      <el-switch v-model="keywordsManagementFormObj.inVisible"></el-switch>
                    </el-form-item>
                    <el-form-item label="数据校验">
                      <el-input v-model="keywordsManagementFormObj.validator"></el-input>
                    </el-form-item>
                    <el-form-item v-if="keywordsManagementFormObj.type == 'date'" label="默认当前日期">
                      <el-switch v-model="keywordsManagementFormObj.defaultCurrentDate" @change="changeDefaultCurrentDate($event, keywordsManagementFormObj)"></el-switch>
                    </el-form-item>
                    <el-divider v-if="keywordsManagementFormObj.type == 'remote'"></el-divider>
                    <el-form-item v-if="keywordsManagementFormObj.type == 'remote'" label="是否多选">
                      <el-switch v-model="keywordsManagementFormObj.multiple"></el-switch>
                    </el-form-item>
                    <el-form-item v-if="keywordsManagementFormObj.type == 'remote'" label="是否可编辑">
                      <el-switch v-model="keywordsManagementFormObj.manualEditable"></el-switch>
                    </el-form-item>
                    <el-form-item v-if="keywordsManagementFormObj.type == 'remote'" label="显示列数">
                      <el-input v-model="keywordsManagementFormObj.displayColumn"></el-input>
                    </el-form-item>
                    <el-form-item v-if="keywordsManagementFormObj.type == 'remote'" label="模糊查询">
                      <el-input v-model="keywordsManagementFormObj.percentSignPosition"></el-input>
                    </el-form-item>
                    <el-form-item v-if="keywordsManagementFormObj.type == 'remote'" label="查找框标题">
                      <el-input v-model="keywordsManagementFormObj.displayedTableHead"></el-input>
                    </el-form-item>
                    <el-form-item v-if="keywordsManagementFormObj.type == 'remote'" label="Hsql">
                      <el-input type="textarea" v-model="keywordsManagementFormObj.hsql" @blur="AnalysisMysql(keywordsManagementFormObj)"></el-input>
                    </el-form-item>
                  </el-form>
                </div>
              </el-tab-pane>
              <el-tab-pane label="HSQL" name="hsql">
                <div class="keywords-header">
                  <el-input
                    type="textarea"
                    placeholder="请写入hsql语句"
                    v-model="whichTable.keywordsTextareaHsql"
                    rows="25"
                    show-word-limit
                  >
                  </el-input>
                  <el-button size="mini" class="margin-top-hr" round @click="ParsingFields">解析字段</el-button>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
          <!--tabs设置-->
          <div class="drawer-box" v-if="tabsDrawer">
            <el-tabs type="card" v-model="tabActiveNameTabs">
              <el-tab-pane label="Tabs设置" name="global">
                <div class="keywords-header">
                  <div class="keywords-header-btns">
                    <!-- <el-button size="mini" round @click="ConversionKeywords">转化字段</el-button> -->
                    <el-button size="mini" round @click="AddTabs">添加Tab</el-button>
                  </div>
                </div>
                <div class="keywords-footer">
                  <el-form :model="whichTable" size="mini">
                    <el-form-item v-for="item in whichTable.tabs" :key="item.id">
                      <el-col :span="11">
                        <el-form-item>
                          <el-input v-model="item.tabsPorp" placeholder="英文字段"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="2">-</el-col>
                      <el-col :span="11">
                        <el-form-item>
                          <el-input v-model="item.tabsLabel" placeholder="国际化"></el-input>
                        </el-form-item>
                      </el-col>
                      <!-- <el-col :span="6">
                        <el-form-item>
                          <div class="field-btns">
                            <el-button type="primary" icon="el-icon-edit" @click="editField('fieldManagent', item.prop, 'table')" circle></el-button>
                            <el-button type="danger" icon="el-icon-delete" circle @click="DeleteField(index)"></el-button>
                          </div>
                        </el-form-item>
                      </el-col> -->
                    </el-form-item>
                  </el-form>
                </div>
              </el-tab-pane>
              <el-tab-pane label="角色" name="c">角色</el-tab-pane>
              <el-tab-pane label="其他" name="d">其他</el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </el-container>
    </el-container>
        
    <el-dialog
      title="`内容预览`"
      :visible.sync="checkXmlValueDialogVisible"
      width="90%"
      :close-on-click-modal="false"
      center>
      <div class="check-xml-box">
        <el-input
          type="textarea"
          placeholder="请输入内容"
          v-model="checkXmlValue"
          rows="25"
          show-word-limit
        >
        </el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button type="primary" @click="checkXmlValueDialogVisible = false">关闭</el-button> -->
      </span>
    </el-dialog>

    <div style="display:none;">
      <!--组件库存区 table-->
      <el-table @header-dragend="ChangeTableWidth" @header-click="TableHeaderClick" :data="tableData" ref="table" height="250" border v-for="item in tableNumberArray" :key="item.id + 'x'">
        <el-table-column :prop="element.prop" :label="element.label" :width="element.width" v-for="element in item.columns" :key="element.prop"></el-table-column>
      </el-table>
      <!--组件库存区 form-->
      <el-form ref="form" class="form-box-drag" data-type="form" v-for="item in formNumberArray" @click.native="ActionForm" :key="item.id + 'x'" label-width="80px">
        <el-form-item :label="inputs.label" :data-felid="inputs.field" :row="inputs.row" :col="inputs.col" :span="inputs.span" v-for="inputs in item.forms" :draggable="true" 
        @dragstart.native="FormsInputsDragstart" :key="inputs.felid" @click.native="ActionFormList" data-type="Forms|input" :data-txt="'Components|input|'+inputs.type">
          <el-input v-if="inputs.type == 'remote'" v-model="inputs.value" @input="ChangeInput($event, inputs)">
            <el-button slot="append" icon="el-icon-search"></el-button>
            <div slot="append" class="remote-body" v-if="inputs.tableData">
              <el-table :data="inputs.tableData" tooltip-effect="dark" style="width: 550px" height="250">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column :label="item" v-for="(item, index) in inputs.displayedTableHead.split(',')" :key="index">
                  <template slot-scope="scope">{{ scope.row[item] }}</template>
                </el-table-column>
              </el-table>
            </div>
          </el-input>
          <el-input v-if="inputs.type == 'text'" :readonly="inputs.readOnly" v-model="inputs.value" type="text" @input="ChangeInput($event, inputs)">
          </el-input>
          <el-input v-if="inputs.type == 'numberText'" :readonly="inputs.readOnly" v-model="inputs.value" type="number" @input="ChangeInput($event, inputs)">
          </el-input>
          <el-input v-if="inputs.type == 'textarea'" :readonly="inputs.readOnly" v-model="inputs.value" type="textarea" @input="ChangeInput($event, inputs)">
          </el-input>
          <el-date-picker v-if="inputs.type == 'date'" :readonly="inputs.readOnly" v-model="inputs.value" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <!--组件库存区 tabs-->
      <el-tabs type="border-card" ref="tabs" v-model="editableTabsValue" v-for="item in tabsNumberArray" :key="item.id + 'x'" @tab-click="tabsHandleClick($event, $event, item.tabs)" closable @tab-remove="tabsHandleRemove($event, item.tabs)">
        <el-tab-pane :label="tabs.tabsLabel" v-for="tabs in item.tabs" :key="tabs.id" :data-tablewhich="tabs.id" :name="'name|'+tabs.id">
          <el-table @header-dragend="(newWidth, oldWidth, column, event)=>{ChangeTableWidthTabs(newWidth, oldWidth, column, event, tabs)}" @header-click="((column, e)=>{TableHeaderClickTabs(column, e, tabs)})" :data="tableData" ref="table" height="250" border>
            <el-table-column :prop="element.prop" :label="element.label" :width="element.width" v-for="element in tabs.columns" :key="element.prop"></el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from "@/components/HelloWorld.vue";
// import draggable from 'vuedraggable'
import Sortable from 'sortablejs';
import layoutFun from "@/assets/js/layoutFun"
import { Progress } from 'element-ui';
export default {
  name: "Home",
  components: {
    // draggable
  },
  data() {
    return {
      url: "http://192.168.2.227:3000",
      checkXmlValue: "",  // 查看xml内容
      checkXmlValueDialogVisible: false, // 是否打开查看xml内容对话框
      tabActiveNameGlobal: "page",//全局编辑器工具选项卡
      tabActiveNameTable: "field",//table编辑器工具选项卡
      tabActiveNameForm: "formGlobal",
      tabActiveNameTabs: "global",
      keywordsManagementForm: null,
      keywordsManagementFormObj: {}, // 当前选择的字段的info
      layoutDoms: null,
      dataTypeOptions: [
        {value: 'string', label: '字符串'},
        {value: 'boolean', label: '布尔值'},
        {value: 'enum', label: '枚举'},
        {value: 'number', label: '数字 | number'},
        {value: 'integer', label: '数字 | integer'},
        {value: 'double', label: '数字 | double'},
        {value: 'float', label: '数字 | float'},
        {value: 'long', label: '数字 | long'},
        {value: 'date', label: '日期 | date'},
        {value: 'datetime', label: '日期 | datetime'},
        {value: 'inputUI', label: '输入框 | inputUI'}
      ],//数据类型可选项
      inputTypeOptions: [
        {value: 'text', label: '文本框'},
        {value: 'textarea', label: '富文本框'},
        {value: 'remote', label: '远程查找框'},
        {value: 'numberText', label: '数字文本框'},
        {value: 'date', label: '日期框'},
        // {value: 'file', label: '文件上传'}
      ],//文本框类型可选项
      globalSettingObj: {
        page: "maintainWmsWarehousePage",
        pageZh: "哦哟哟",
        entityClass: "com.vtradex.wms.server.model.entity.warehouse.WmsWarehouse",
        autoQuery: true,
        mainEntrance: true,
        width: 0,
        height: 0,
        onClose: 'refreshParent',// 关闭事件
        pageType: 'maintainPage', //页面类型
      }, // 全局变量
      editableTabsValue: "", // tabs的v-model
      settingDrawer: true, // 全局设置
      formDrawer: false, // form表单设置
      tabsDrawer: false,
      keywordsTextarea: 'moon|月亮, \nsun|太阳, son|儿砸, pig|哼唧', // 字段textarea
      // keywordsTextareaHsql: "", // hsql语句
      conversionFormKeywordsTextarea: 'text|moon|月亮x, \n numberText|sun|太阳x,\n remote|son|儿砸x,\n date|pig|哼唧x', // 转化表单
      menuDragArray: false,// 布局框拖动时产生的数组
      whichTable: {}, // 当前编辑的table
      whichTableId: -1, // 当前编辑的table id
      keywordsManagement: null,
      keywordsManagementObj: {}, // 当前选择的字段的info
      layoutBoxArr: [
        { id: 1, name: '100', isDrag: true},
        { id: 2, name: '50 50', isDrag: true}
        // { id: 3, name: '4 4 4'},
        // { id: 4, name: '3 3 3 3 '}
      ], // 布局框数组
      tableDrawer: false, // table组件编辑器
      tableNumberArray: [
        {
          id: 'table123',
          keywordsTextareaHsql: "",
          columns: [
          ]
        }
      ], // 当前库存区，table组件数量的数组
      formNumberArray: [
        {
          id: 'forms123',
          keywordsTextareaHsql: "",
          row: 4,
          inputComWidth: 200,
          forms: [
            {
              label: '活动',
              value: '',
              field: "name",
              readOnly: false,//只读
              required: false,//必填
              reserve: false,//是否重置控件
              forceOverride: true,//强制更新
              focusUI: false,//聚焦
              inVisible: false,//是否隐藏
              validator: "nonNegativeNumber",//数据校验
              // 远程查找框属性             
              multiple: false,//多选
              manualEditable: true,//可编辑
              defaultCurrentDate: true, // 默认当前日期
              displayColumn: "3", //显示列数
              percentSignPosition: "both",  //模糊查询
              displayedTableHead: "序号,编码,名称", // 查找框标题
              hsql: ""
            }
          ]
        }
      ], // 当前库存区，form组件数量的数组
      tabsNumberArray: [{
        id: "tabs123",
        tabs: [
          {
            id: 'tt12',
            label: '测试'
          }
        ]
      }], // 当前库存区，form组件数量的数组
      tableNumberIndex: 0, // 当前已使用table数量为0
      dragIndex: -1, // 当前拖动对象到目标对象中，所对应的index值
      layoutComponentsArr: [
        {id: 1, label: "表格", type: "table"},
        {id: 2, label: "表单", type: "form"},
        {id: 3, label: "多表格", type: "tabs"}
      ], // 组件数组
      layoutInputsArr: [
        {id: 1, label: "| 文本 |", type: "input|text"},
        {id: 2, label: "| 日期 |", type: "input|date"},
        {id: 3, label: "| 数字框 |", type: "input|numberText"},
        {id: 4, label: "| 富文本 |", type: "input|textarea"},
        {id: 5, label: "| 远程查找框 |", type: "input|remote"}
      ], // 文本组件
      tableData: [],
      from: null
    }
  },
  watch: {
    keywordsManagement: (news, olds)=>{
      // console.log(news, olds)
    },
    tableNumberArray: {
      handler(news, olds) {
        // console.log(this.tableNumberArray)
      },
      immediate: true,
      deep: true
    },
    whichTable: {
      handler(news, olds) {
        // document.querySelectorAll(".layout-components-box").forEach(element => {
        //   element.classList.remove('table-components-on');
        // });
        // if(news.id && news.id.indexOf('table') >= 0){
        //   let dom = document.querySelector("div[data-tablewhich=" + news.id + "]");
        //   dom.classList.add('table-components-on');
        // }else{
        //   document.querySelectorAll("th.is-leaf").forEach(element => {
        //     element.classList.remove('on');
        //   });
        // }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    /**
     * 添加tabs
    */
    AddTabs(){
      let abs = this.common.FindArrayObject(this.whichTableId, this.tabsNumberArray)['tabs'];
      abs.push({
        id: 'table' + (+new Date()),
        keywordsTextareaHsql: "",
        tabsLabel: '标签' + (+new Date()),
        tabsPorp: 'tabsPorp' + (+new Date()),
        columns: [{
          prop: 'id', 
          label: '序号',
          width: "",
          visible: true,
          sortable: true,
          horizonAlign: "center",
          verticalAlign: "middle",
          dataType: "string",
          format: "", 
          formatParam: "", 
          language: false
        }]
      });

      this.editableTabsValue == "" ? this.editableTabsValue = "name|" + abs[0].id: null;
    },
    /**
     * tab移除标签
    */
    tabsHandleRemove(e, tab){
      console.log(e, tab, this.editableTabsValue)
      let sameTabVal = (e == this.editableTabsValue);
      tab.forEach((element, index) => {
        if(element.id == e.split('|')[1]){
          tab.splice(index, 1);
          ;(sameTabVal && tab.length>0) ? this.editableTabsValue = 'name|' + tab[0].id : null;
          tab.length == 0 ? this.editableTabsValue = "" : null;
        }
      });
    },
    /**
     * tab标签点击
    */
    tabsHandleClick(tab, event, tabs){
      this.whichTableId = tab.$el.dataset.tablewhich;
      this.whichTable = this.common.FindArrayObject(this.whichTableId, tabs);
      this.tableDrawer = true, this.settingDrawer = this.formDrawer = this.tabsDrawer = this.tabsDrawer = false;
      this.ClearAllActionClass();
      this.keywordsManagement = this.keywordsManagementObj = "";
      console.log(this.whichTable, this.whichTableId)
      this.tabActiveNameTable = "field"; // tab跳转类型
    },
    /**
     * 是否必填
    */
    isRequired(v){
      console.log(this.keywordsManagementFormObj)
      let dom = document.querySelector("div[data-felid='"+this.keywordsManagementFormObj.field+"']");
      v ? dom.classList.add('is-required') : dom.classList.remove('is-required');
    },
    /**
     * 修改控件默认宽度
    */
    handleChangeDefaultComWidth(c, o, t){
      console.log(c, o, t)
      document.querySelectorAll("#wrapper .el-form-item.el-form-item--small").forEach(element => {
        element.style.width = c + 'px';
      });
      this.InitFormList(this.whichTable);
    },
    /**
     * 
    */
    AnalysisMysql(item){
      this.common.Axios(this.url + "/searchMysql", {
        mysql: item
      }, res=>{
        console.log(res.data)
        if(res.data.status == 100){
          console.log(res.data.r);
          this.keywordsManagementFormObj['tableData'] = res.data.r;
        }
      },err =>{
        console.log(err)
      });
    },
    /**
     * 修改默认列数
    */
    handleChangeDefaultRow(c, o, t){
      this.InitFormList(this.whichTable);
    },
    /**
     * 修改row col span
    */
    handleChangeKeywordsManagementFormObj(c, o, t){
      if(t == 'span'){
        // 修改占比span
        this.ChangeFormListSpan(c);
      }else{
        this.InitFormListLayout(this.whichTable);
      }
    },
    /**
     * 获取基数
    */
    ChangeFormListSpan(c){
      this.InitFormListLayout(this.whichTable);
    },
    /**
     * form表单点击input项选择
    */
    ActionFormList(e){
      this.SelectFatherDom(e);
      // console.log(e.target)
      let txt = this.common.FindAncestorsElement(e.target, 'el-form-item el-form-item--small').dataset.felid;
      console.log(txt)
      this.tabActiveNameForm = "fieldManagent";
      txt && (this.keywordsManagementForm = txt);
      this.ChangeKeywordsManagementForms(txt);
      // console.log(this.whichTableId)
    },
    /**
     * form点击选择
    */
    ActionForm(e){
      this.SelectFatherDom(e);
    },
    /**
     * 选中form
    */
    SelectFatherDom(e){
      let father = this.common.FindAncestorsElement(e.target, 'layout-components-box');
      this.whichTableId = father && father.dataset.formwhich;
      this.whichTable = this.common.FindArrayObject(father && father.dataset.formwhich, this.formNumberArray);
      this.ClearAllActionClass();
      father.querySelector(".drag-tools-bar").classList.add("on");
      this.formDrawer = true, this.tabsDrawer = this.tableDrawer = this.settingDrawer = false;
    },
    /**
     * 清除on
    */
    ClearAllOnClass(type){
      if(type == 'table'){
        document.querySelectorAll(".layout-components-box").forEach(element => {
          element.classList.remove('table-components-on');
        });
      }
      if(type == "th"){
        document.querySelectorAll("th.is-leaf").forEach(element => {
          element.classList.remove('on');
        });
      }
    },
    /**
     * 表格头点击
    */
    TableHeaderClickTabs(column, e, tabs){
      this.TableHeaderClickFindWhichTableId(column, e);
      this.whichTable = tabs;
      this.editField('fieldManagent', column.property, 'table');
    },
    /**
     * 表格头点击
    */
    TableHeaderClick(column, e){
      console.log(column, e)
      this.TableHeaderClickFindWhichTableId(column, e);
      this.whichTable = this.common.FindArrayObject(this.whichTableId, this.tableNumberArray);
      this.editField('fieldManagent', column.property, 'table');
    },
    /**
     * 表格头点击-详细
    */
    TableHeaderClickFindWhichTableId(column, e){
      let divDom = null;
      document.querySelectorAll("th.is-leaf").forEach(element => {
        element.classList.remove('on');
      });
      if(e.target.tagName.toLocaleUpperCase() == "DIV"){
        divDom = e.target.parentNode;
      }else{
        divDom = e.target;
      }
      divDom.classList.add("on");
      // document.querySelectorAll(".cell").forEach(element => {
      //   element.className = "cell";
      // });
      // e.target.parentNode.className += " on";
      function findTablewhich(node) {
          var result = null;
          while ((node = node.parentNode, node) !== null) {
            if (node.dataset.tablewhich) {
              result = node.dataset.tablewhich;
              break;
            }
          }
          return result;
      }
      this.whichTableId = findTablewhich(e.target);
      this.tableDrawer = true, this.settingDrawer = this.formDrawer = this.tabsDrawer = false;
    },
    /**
     * 字段管理-切换字段-form
    */
    ChangeKeywordsManagementForms(val){
      if(val == ""){
        this.keywordsManagementFormObj = {};
      }else{
        this.whichTable.forms.forEach(element => {
          element.field == val ? this.keywordsManagementFormObj = element: null;
        });
      }
    },
    /**
     * 字段管理-切换字段-table
    */
    ChangeKeywordsManagement(val){
      if(val == ""){
        this.keywordsManagementObj = {};
      }else{
        this.whichTable.columns.forEach(element => {
          element.prop == val ? this.keywordsManagementObj = element: null;
        });
        let th = document.querySelector("div[data-tablewhich='"+this.whichTable.id+"']").querySelectorAll('th');
        th.forEach(ele => {
          // console.log(ele.innerText, this.keywordsManagementObj.label)
          if(ele.innerText == this.keywordsManagementObj.label){
            this.ClearAllOnClass('th');
            ele.classList.add('on');
          }
        });
      }
    },
    /**
     * 打开全局设置
    */
    OpenGlobalSetting(e){
      if(e.target.getAttribute("id") == "wrapper"){
        this.ClearAllActionClass();
        this.settingDrawer = true, this.formDrawer = this.tabsDrawer = this.tableDrawer = false;
        this.whichTable = {}
        this.whichTableId = -1;
      }
    },
    /**
     * 修改默认日期
    */
    changeDefaultCurrentDate(e, obj){
      e ? obj.value = new Date() : obj.value = "";
    },
    /**
     * 删除字段-form
    */
    DeleteFormField(index){
      // 删除字段
      console.log()
      if(this.whichTable.forms.length == 1){
        this.$message.error('表单不能删除最后一条。');
      }else{
        this.whichTable.forms.splice(index, 1);
      }
    },
    /**
     * 删除字段
    */
    DeleteField(index){
      // 删除字段
      this.whichTable.columns.splice(index, 1);
    },
    /**
     * 布局框检测
    */
    CheckLayoutBoxArray(val, item){
      if(val == ""){
        item.isDrag = false;
      }else{
        let numArr = val.split(" ");
        let numbers = [];
        for(let key of numArr){
            !isNaN(parseInt(key)) ? numbers.push(parseInt(key)) : null;
        }
        let total = numbers.reduce((prev,current,index,arr)=>{
            return prev+current
        });
        console.log(total)
        if(total !== 100){
          item.isDrag = false;
        }else{
          item.isDrag = true;
        }
      }
    },
    /**
     * 组件开始拖动
    */
    FormsInputsDragstart(e){
      this.from = e.target;
      return false;
    },
    /**
     * 打开全局设置
    */
    globalSetting(){
      this.settingDrawer = true,
      this.formDrawer =
      this.tabsDrawer = 
      this.tableDrawer = false;
    },
    /**
     * 关闭全局设置
    */
    settingDrawerClose(){
      this.settingDrawer = false;
    },
    /**
     * 预览html
    */
    PreviewHtmlValue(type){
      this.checkXmlValueDialogVisible = true;
      if(type == "html"){
        let xmlVal = this.common.OnlyHtmlValue({
          html: document.querySelector("#wrapper").outerHTML
        });
        this.checkXmlValue = xmlVal;
      }
    },
    /**
     * 添加表单
    */
    handleCommand(command) {
      // 下拉菜单--弹出input
      this.$message('click on item ' + command);
      this.whichTable.forms.push({
        label: '活动',
        value: '',
        field: "name" + (+new Date()),
        row: 1,
        col: 1,
        span: 1,
        type: command,
        readOnly: false,//只读
        required: false,//必填
        reserve: false,//是否重置控件
        forceOverride: true,//强制更新
        focusUI: false,//聚焦
        inVisible: false,//是否隐藏
        validator: "nonNegativeNumber",//数据校验
        // 远程查找框属性             
        multiple: false,//多选
        manualEditable: true,//可编辑
        defaultCurrentDate: true, // 默认当前日期
        displayColumn: "3", //显示列数
        percentSignPosition: "both",  //模糊查询
        displayedTableHead: "序号,编码,名称", // 查找框标题,
        hsql: ""
      });
      this.InitFormList(this.whichTable);
    },
    /**
     * 初始化form表单
    */
    InitFormList(object){
      // 初始化排列设置row，col，span
      let defRow = object.row;//默认列数
      // 开始设置默认的row col span
      object.forms.forEach((element, index) => {
        element.row = Math.ceil((index+1)/defRow);
        element.col = index % defRow + 1;
        // element.span = 1;
      });
      this.InitFormListLayout(object);
    },
    /**
     * 初始化form排序
    */
    InitFormListLayout(object){
      // 对input控件排序
      object.forms = this.common.SortArrayTwoDimensional(object.forms);
      let defWidth = object.inputComWidth;//默认宽度
      this.$nextTick(() => {
        // 获取row最大值
        this.common.SetFormSize(object);
        object.forms.forEach((element, index) => {
          this.$nextTick(() => {
            let doms = document.querySelector("div[data-formwhich='"+object.id+"']");
            let dom = doms.querySelector("div[data-felid='" +element.field+ "']");
            let span = this.common.GetInputFrontWidth(object.forms, element);
            dom.style.width = defWidth * element.span + "px";
            dom.style.top = ((element.row-1) * 33 + element.row*20) + 'px';
            dom.style.left = span*defWidth + 'px';
          });
        });
      });
    },
    /**
     * 预览xml内容
    */
    PreviewXmlValue(type){
      this.checkXmlValueDialogVisible = true;
      if(type == 'checkxml'){
        // console.log()
        let xmlVal = this.common.HtmlToXml({
          global: this.globalSettingObj, 
          html: document.querySelector("#wrapper").outerHTML, 
          tableArray: this.tableNumberArray,
          formArray: this.formNumberArray,
          tabsArray: this.tabsNumberArray,
          js2xml: this.X2JS.js2xml
        });
        this.checkXmlValue = 
        $.format(xmlVal, {method: 'xml'})
        .replace(/&lt;/g, "<")
        .replace(/&#x27;/g, "'");
      }else if(type == 'checkproperties'){
        let xmlVal = this.common.CreatProperties({
          global: this.globalSettingObj,
          tableArray: this.tableNumberArray,
          formArray: this.formNumberArray,
          tabsArray: this.tabsNumberArray,
          js2xml: this.X2JS.js2xml
        });
        this.checkXmlValue = xmlVal;
      }
    },
    /**
     * ChangeInput
    */
    ChangeInput(val, e){
      console.log(this.formNumberArray)
      console.log(val, e)
    },
    /**
     * 下载
    */
    DownloadFiles(fileType){
      // 下载
      let fileName = this.globalSettingObj.page;
      let xmlVal;
      if(fileType == 'properties'){
        fileName += '_zh';
        xmlVal = this.common.CreatProperties({
          global: this.globalSettingObj,
          tableArray: this.tableNumberArray,
          formArray: this.formNumberArray,
          tabsArray: this.tabsNumberArray
        });
      }else{
        // 返回转化过的xml内容
        xmlVal = this.common.HtmlToXml({
          global: this.globalSettingObj, 
          html: document.querySelector("#wrapper").outerHTML, 
          tableArray: this.tableNumberArray,
          formArray: this.formNumberArray,
          tabsArray: this.tabsNumberArray
        });
      }
      this.common.Axios(this.url + "/creatXml", {
        outerHTML: xmlVal, // 内容
        fileName: fileName,
        fileType: fileType
      }, res=>{
        console.log(res.data)
        if(res.data.status == 100){
          window.open(this.url + "/download?fileName="+fileName+"&fileType="+fileType);
        }
      },err =>{
        console.log(err)
      });
      
    },
    /**
     * 编辑字段 - 跳转
    */
    editField(type, id, component){
      if(component == 'table'){
        this.tabActiveNameTable = type; // tab跳转类型
        this.keywordsManagement = id;
        this.whichTable.columns.forEach(element => {
          element.prop == this.keywordsManagement ? this.keywordsManagementObj = element: null;
        });
      }else if(component == 'form'){
        this.tabActiveNameForm = type; // tab跳转类型
        this.keywordsManagementForm = id;
        // keywordsManagementForm: null,
        // keywordsManagementFormObj: {}, // 当前选择的字段的info
        this.whichTable.forms.forEach(element => {
          element.field == this.keywordsManagementForm ? this.keywordsManagementFormObj = element: null;
        });
      }
    },
    /**
     * handleOpen
    */
    handleOpen(e){
      // console.log(e);
    },
    /**
     * handleClose
    */
    handleClose(e){
      // console.log(e)
    },
    /**
     * 打开table设置
    */
    tableDrawerClose(){
      this.tableDrawer = false;
    },
    /**
     * 改变文本框类型时
    */
    ChangeKeywordsManagementFormObj(val, item){
    },
    /**
     * 改变数据类型时
    */
    ChangeKeywordsManagementObj(val, item){
      console.log(val, item)
      if(val == "boolean"){
        item.format = "enumFormat";
        item.formatParam = "booleanFormat";
      }else if(val == "datetime"){
        item.format = "dateFormat";
        item.formatParam = "y-m-d h:m:s";
      }else if(val == "inputUI"){
        item.format = "uploadAttachmentFormatter";
        item.formatParam = "UploadAttachmentFormatter";
      }else if(val == "enum"){
        item.format = "";
        item.formatParam = "";
      }else{
        item.format = "";
        item.formatParam = "";
      }
    },
    /**
     * 添加关键字
    */
    AddKeywords(){
      this.common.FindArrayObject(this.whichTableId, this.tableNumberArray)['columns'].push({
        prop: null,
        label: '测试字段',
        width: "",
        visible: true,
        sortable: true,
        horizonAlign: "center",
        verticalAlign: "middle",
        dataType: "string",
        format: "", 
        formatParam: "", 
        language: false
      });
    },
    /**
     * 解析hsql语句
    */
    ParsingFields(){
      let f = this.whichTable.keywordsTextareaHsql.replace(/\ +/g,"").replace(/[\r\n]/g,"");

      if(f.indexOf("SELECT") >= 0){
        f = f.split("SELECT")[1];
      }
      if(f.indexOf("FROM") >= 0){
        f = f.split("FROM")[0];
      }
      f = f.split(",");

      // console.log(f, this.whichTable)
      f.forEach(element => {
        var result = this.whichTable['columns'].some(item=>{
          if(item.prop == element){
            return true 
          } 
        });
        if(!result){
          // 如果不存在该字段则添加
          this.whichTable['columns'].push({
            prop: element,
            label: element,
            width: "",
            visible: true,
            sortable: true,
            horizonAlign: "center",
            verticalAlign: "middle",
            dataType: "string",
            format: "", 
            formatParam: "", 
            language: false
          })
        }
      });
    },
    /**
     * 转化表单
    */
    ConversionForms(){
      this.conversionFormKeywordsTextarea = this.conversionFormKeywordsTextarea.replace(/\ +/g,"").replace(/[\r\n]/g,"");
      this.conversionFormKeywordsTextarea.split(',').forEach((element, index) => {
        var result = this.whichTable.forms.some(item=>{
          if(item.field == element.split("|")[1]){
            return true 
          } 
        });
        if(!result){
          // 如果不存在该字段则添加
          this.whichTable.forms.push({
            // 活动 
            label: element.split("|")[2],
            value: '',
            field: element.split("|")[1],
            row: 1,
            col: 1,
            span: 1,
            type: element.split("|")[0],
            readOnly: false,//只读
            required: false,//必填
            reserve: false,//是否重置控件
            forceOverride: true,//强制更新
            focusUI: false,//聚焦
            inVisible: false,//是否隐藏
            validator: "nonNegativeNumber",//数据校验
            // 远程查找框属性             
            multiple: false,//多选
            manualEditable: true,//可编辑
            defaultCurrentDate: true, // 默认当前日期
            displayColumn: "3", //显示列数
            percentSignPosition: "both",  //模糊查询
            displayedTableHead: "序号,编码,名称", // 查找框标题,
            hsql: ""
          })
        }
      });
      this.InitFormList(this.whichTable);    
    },
    /**
     * 转化字段
    */
    ConversionKeywords(){
      this.keywordsTextarea = this.keywordsTextarea.replace(/\ +/g,"").replace(/[\r\n]/g,"");
      this.keywordsTextarea.split(',').forEach(element => {
        var result = this.whichTable['columns'].some(item=>{
          if(item.prop == element.split("|")[0]){
            return true 
          } 
        });
        if(!result){
          // 如果不存在该字段则添加
          this.whichTable['columns'].push({
            prop: element.split("|")[0],
            label: element.split("|")[1],
            width: "",
            visible: true,
            sortable: true,
            horizonAlign: "center",
            verticalAlign: "middle",
            dataType: "string",
            format: "", 
            formatParam: "", 
            language: false
          })
        }
      });
    },
    /**
     * 拖动中
    */
    DragingOver(e){
      e.preventDefault();
    },
    /**
     * 拖动在内容区
    */
    DragingOverWrapper(e){
      e.preventDefault();
      if(!this.from){return false;}
      this.dragIndex = this.common.WrapperOver(e, this.from.dataset.txt, this); // 当前拖动对象到目标对象中，所对应的index值
    },
    /**
     * 组件开始拖动
    */
    ComponentsDragstart(e){
      this.from = e.target;
      return false;
    },
    /**
     * 布局框拖动开始
    */
    MenuDragstart(e){
      // let cloneDom = e.target.cloneNode(true);
      // cloneDom.classList.add("clone-new");
      // e.target.parentNode.insertBefore(cloneDom, e.target);
      // e.target.className = 'clone-old';
      // console.log(e);
      var dom = layoutFun.menuLayout(this.menuDragArray);
      this.menuDragArray = this.common.CheckLayoutNum(e.target.dataset.txt, dom);
      this.from = e.target;
      return false;
    },
    /**
     * 拖动离开内容区
    */
    DragLeaveWrapper(e){
      (e.fromElement.className == "" || e.fromElement.className.indexOf("empty-frame")) >= 0 ? null : this.common.ClearEmptyFrame();
    },
    /**
     * 改变table列宽Tabs
    */
    ChangeTableWidthTabs(newWidth, oldWidth, column, event, tabs){
      let whDom = this.common.FindAncestorsElement(event.target, 'layout-components-box');
      if(whDom.dataset.componentstype == 'tabs'){
        this.whichTable = tabs, this.tableDrawer = true, this.settingDrawer = this.formDrawer = this.tabsDrawer = false;
        this.whichTable.columns.forEach(element => {
          if(element.prop == column.property){
            element.width = newWidth;
          }
        });
      }
    },
    /**
     * 改变table列宽Table
    */
    ChangeTableWidth(newWidth, oldWidth, column, event){
      let whDom = this.common.FindAncestorsElement(event.target, 'layout-components-box');
      if(whDom.dataset.componentstype == 'table'){
        this.tableNumberArray.forEach(ele => {
          if(ele.id == whDom.dataset.tablewhich){
            this.whichTable = ele, this.tableDrawer = true, this.settingDrawer = this.formDrawer = this.tabsDrawer = false;
          }
        });
        this.whichTable.columns.forEach(element => {
          if(element.prop == column.property){
            element.width = newWidth;
          }
        });
      }
    },
    /**
     * 拖放到内容区
    */
    OnDropWrapper(e){
      e.preventDefault();
      let dom = null;
      let idTime = + new Date();
      if(this.from && this.from.className.indexOf("layout-box-btn-thumb") >= 0){
        this.common.ClearEmptyFrame();
        return false;
      }
      // 添加dom函数
      var addDocDument = ()=>{
        if(dom && dom.dataset.nottowrapper && !e.target.dataset.components){
          this.$message.error('不允许拖放到布局框外');
          this.common.ClearEmptyFrame();
          return false;
        }
        // console.log("dom", dom)
        if(dom && e.target.dataset.type == "LayoutBox"){
          const EmptyFrame = e.target.querySelector('.empty-frame');
          // console.log(dom, EmptyFrame)
          e.target.insertBefore(dom, EmptyFrame);
          this.AddEvent(dom);
          EmptyFrame && EmptyFrame.remove();
          // 再次添加data-type和data-components
          dom.querySelectorAll(".layout-box-kids").forEach(element => {
            element.setAttribute("data-type", "LayoutBox");
            element.setAttribute("data-components", "ComponentsBox");
          });
          this.from = null;
        }
      }
      console.log("拖拽来源",this.from)
      console.log("拖拽目标",e.target)
      // 判断来源
      if(this.from){
        if(this.from.dataset.txt && this.from.dataset.txt.indexOf('Layout') >= 0){
          console.log(1)
          dom = layoutFun.menuLayout(this.menuDragArray);
        }else if(this.from.dataset.txt && this.from.dataset.txt.indexOf('Components') >= 0){
          console.log(2)
          if(e.target.dataset.components && e.target.dataset.components.indexOf('ComponentsBox') >= 0){
            console.log(4)
            let comtype = this.from.dataset.txt.split('|')[1];
            if(comtype == 'table'){
              this.AddTablesArray(idTime);
            }else if(comtype == "form"){
              this.AddFormsArray(idTime);
            }else if(comtype == "tabs"){
              this.AddTabsArray(idTime);
            }
            this.$nextTick(() => {
              dom = layoutFun.componentsDom({
                type: this.from.dataset.txt.split('|')[1], // 使用的组件类型
                refs: this.$refs, // 当前库存区所有的组件
                id: this.from.dataset.txt.split('|')[1] + idTime
              });
              addDocDument();
              this.$nextTick(()=>{
                this.InitSortTabs();
              });
            });
          }else{
            if(this.from.dataset.txt && this.from.dataset.txt.split('|')[1] == 'input'){
              if(this.common.FindAncestorsElement(e.target, 'el-form form-box-drag').dataset && this.common.FindAncestorsElement(e.target, 'el-form form-box-drag').dataset.type == 'form'){
                // 添加
                let t = this.from.dataset.txt.split("|")[2];
                let fm = this.common.FindAncestorsElement(e.target, 'layout-components-box').dataset.formwhich;
                let arr = this.common.FindArrayObject(fm, this.formNumberArray);

                // console.log("ceshi可以放到form", t, arr, this.dragIndex,this.from.dataset.type);
                
                if(this.from.dataset.type && this.from.dataset.type.indexOf("Forms|input") >= 0){
                  console.log(111111111);
                  // 从一个form拖动到另一个form或者排序
                  let curFm = this.common.FindAncestorsElement(this.from, 'layout-components-box').dataset.formwhich;
                  let curArr = this.common.FindArrayObject(curFm, this.formNumberArray);
                  // console.log(this.from.dataset.felid, curArr.forms, arr.forms)
                  let curDomObj = null;
                  curArr.forms.forEach((ele, i) => {
                    if(ele.field == this.from.dataset.felid){
                      curDomObj = curArr.forms.splice(i, 1)[0];
                    }
                  });
                  console.log(curFm, fm)
                  arr.forms.splice(this.dragIndex, 0, curDomObj);
                }else{
                  console.log(222222);
                  let row = arr.forms[this.dragIndex] ? arr.forms[this.dragIndex]['row'] : 1;
                  let col = arr.forms[this.dragIndex] ? arr.forms[this.dragIndex]['col'] : 1;
                  let obj = {
                    // 活动 
                    label: "新元素",
                    value: '',
                    field: 'name' + (+new Date()),
                    row: row,
                    col: col,
                    span: 1,
                    type: t,
                    readOnly: false,//只读
                    required: false,//必填
                    reserve: false,//是否重置控件
                    forceOverride: true,//强制更新
                    focusUI: false,//聚焦
                    inVisible: false,//是否隐藏
                    validator: "nonNegativeNumber",//数据校验
                    // 远程查找框属性             
                    multiple: false,//多选
                    manualEditable: true,//可编辑
                    defaultCurrentDate: true, // 默认当前日期
                    displayColumn: "3", //显示列数
                    percentSignPosition: "both",  //模糊查询
                    displayedTableHead: "序号,编码,名称", // 查找框标题,
                    hsql: ""
                  };
                  if(this.dragIndex == 0){
                    arr.forms.unshift(obj);
                  }else{
                    arr.forms.splice(this.dragIndex, 0, obj);
                  }
                }
                this.common.ClearEmptyFrame();
                this.InitFormList(arr);
              }else{
                dom = null;
              }
            }else{
              dom = null;
            }
          }
        }else{
          console.log(3)
          dom = this.from;
        }
      }else{
        dom = null;
      }
      addDocDument();
    },
    /**
     * 添加 table 数据
    */
    AddTablesArray(idTime, object){
      if(object){
        this.tableNumberArray.push(object);
      }else{
        this.tableNumberArray.push({
          id: 'table' + idTime,
          keywordsTextareaHsql: "",
          columns: [{
            prop: 'id', 
            label: '序号',
            width: "",
            visible: true,
            sortable: true,
            horizonAlign: "center",
            verticalAlign: "middle",
            dataType: "string",
            format: "", 
            formatParam: "", 
            language: false
          }]
        }); // 当前库存区table数组
      }
    },
    /**
     * 添加 forms 数据
    */
    AddFormsArray(idTime, object){
      if(object){
        this.formNumberArray.push(object);
        this.$nextTick(()=>{
          this.InitFormListLayout(object);
        });
      }else{
        this.formNumberArray.push({
          id: 'form' + idTime,
          keywordsTextareaHsql: "",
          row: 4,
          inputComWidth: 200,
          forms: [{
            label: '活动',
            value: '',
            field: "name" + idTime,
            row: 1,
            col: 1,
            span: 1,
            type: "text",
            readOnly: false,//只读
            required: false,//必填
            reserve: false,//是否重置控件
            forceOverride: true,//强制更新
            focusUI: false,//聚焦
            inVisible: false,//是否隐藏
            validator: "nonNegativeNumber",//数据校验
            // 远程查找框属性             
            multiple: false,//多选
            manualEditable: true,//可编辑
            defaultCurrentDate: true, // 默认当前日期
            displayColumn: "3", //显示列数
            percentSignPosition: "both",  //模糊查询
            displayedTableHead: "序号,编码,名称", // 查找框标题,
            hsql: ""
          }]
        });
      }
    },
    /**
     * 添加 tabs 数据
    */
    AddTabsArray(idTime, object){
      if(object){
        this.tabsNumberArray.push(object);
        this.editableTabsValue = "name|" + object.tabs[0].id;
      }else{
        this.tabsNumberArray.push({
          id: 'tabs' + idTime,
          tabs: [{
            id: 'table' + idTime,
            keywordsTextareaHsql: "",
            tabsLabel: '标签' + idTime,
            tabsPorp: 'tabsPorp' + idTime,
            columns: [{
              prop: 'id', 
              label: '序号',
              width: "",
              visible: true,
              sortable: true,
              horizonAlign: "center",
              verticalAlign: "middle",
              dataType: "string",
              format: "", 
              formatParam: "", 
              language: false
            }]
          }]
        }); // 当前库存区tabs数组
        this.editableTabsValue = "name|table"+idTime;
      }
    },
    /**
     * 添加新添加元素的事件
    */
    AddEvent(dom){
      // 拖动
      let dragDom = dom.querySelector(".layout-box-btn-thumb");
      if(dragDom){
        dragDom.setAttribute("draggable", true);
        dragDom.addEventListener("dragstart", (e)=>{
          this.from = e.target.parentNode.parentNode;

          this.from.querySelectorAll(".layout-box-kids").forEach(element => {
            element.setAttribute("data-type", "");
            element.setAttribute("data-components", "");
          });

          this.from.dataset.componentstype && this.from.setAttribute("data-nottowrapper", "true");
          this.from.setAttribute("data-txt", "WrapperBox");
        });
      }

      // 编辑
      let editDom = dom.querySelector('.layout-box-btn-edit');
      if(editDom){
        editDom.addEventListener("click", (e)=>{
          let grandfather = e.target.parentNode.parentNode.parentNode;
          let comType = grandfather.dataset.componentstype;
          console.log(comType)
          if(comType == 'table'){
            this.whichTableId = grandfather.dataset.tablewhich;
            this.whichTable = this.common.FindArrayObject(this.whichTableId, this.tableNumberArray);
            this.tableDrawer = true, this.settingDrawer = this.formDrawer = this.tabsDrawer = this.tabsDrawer = false;
            this.ClearAllActionClass();
            e.target.parentNode.parentNode.classList.add("on");
          }else if(comType == 'form'){
            this.ClearAllActionClass();
            e.target.parentNode.parentNode.classList.add("on");
            this.whichTableId = grandfather.dataset.formwhich;
            console.log("1",this.whichTableId)
            console.log("2",this.formNumberArray)
            this.whichTable = this.common.FindArrayObject(this.whichTableId, this.formNumberArray);
            this.formDrawer = true, this.settingDrawer = this.tabsDrawer = this.tableDrawer = false;
          }else if(comType == 'tabs'){
            this.ClearAllActionClass();
            e.target.parentNode.parentNode.classList.add("on");
            this.whichTableId = grandfather.dataset.tabswhich;
            this.whichTable = this.common.FindArrayObject(this.whichTableId, this.tabsNumberArray);
            this.tabsDrawer = true, this.formDrawer = this.settingDrawer = this.tableDrawer = false;
            console.log(this.whichTable)
          }
        });
      }
      
      // 添加Tabs
      let addTabsDom = dom.querySelector('.layout-box-btn-document-add');
      if(addTabsDom){
        addTabsDom.addEventListener("click", (e)=>{
          let grandfather = e.target.parentNode.parentNode.parentNode;
          let comType = grandfather.dataset.componentstype;
          console.log(comType)
          if(comType == 'tabs'){
            e.target.parentNode.parentNode.classList.add("on");
            this.whichTableId = grandfather.dataset.tabswhich;
            this.whichTable = this.common.FindArrayObject(this.whichTableId, this.tabsNumberArray);
            this.tabsDrawer = true, this.formDrawer = this.settingDrawer = this.tableDrawer = false;
            console.log(this.whichTable)
            this.AddTabs();
          }
        });
      }

      // 删除
      let deleteDom = dom.querySelector(".layout-box-btn-delete");
      if(deleteDom){
        deleteDom.addEventListener("click", (e)=>{
          let barDom = this.common.FindAncestorsElement(e.target, 'drag-tools-bar');
          console.log(this.formNumberArray)
          if(barDom.dataset.type == "componentsBox"){
            // 如果点击的是组件框的删除
            let parDom = barDom.parentNode;
            console.log(parDom.dataset.componentstype)
            // table
            if(parDom.dataset.componentstype == 'table'){
              this.tableNumberArray.forEach((ele, index) => {
                if(parDom.dataset.tablewhich == ele.id){
                  this.$confirm('是否删除该对象?', '提示', {confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'}).then(() => {
                    this.$message({ type: 'success', message: '删除成功!'});
                    this.tableNumberArray.splice(index, 1);
                    parDom.remove();
                    this.formDrawer = this.tabsDrawer = this.tableDrawer = false, this.settingDrawer = true;
                  }).catch(() => {
                    this.$message({type: 'info', message: '已取消删除'});
                  });
                }
              });
            }
            if(parDom.dataset.componentstype == 'form' || parDom.dataset.componentstype == 'tabs'){
              this.$confirm('是否删除该对象?', '提示', {confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'}).then(() => {
                this.$message({ type: 'success', message: '删除成功!'});
                // this.formNumberArray.splice(index, 1);
                parDom.remove();
                this.formDrawer = this.tabsDrawer = this.tableDrawer = false, this.settingDrawer = true;
              }).catch(() => {
                this.$message({type: 'info', message: '已取消删除'});
              });
            }
          }else if(barDom.dataset.type == "builderBox"){
            // 如果点击的是布局框的删除
            let parDom = barDom.parentNode;
            let tableComps = [];
            parDom.querySelectorAll('div[data-componentstype="table"]').forEach(element => {
              tableComps.push(element.dataset.tablewhich);
            });
            console.log("tableComps",tableComps)
            this.$confirm('是否删除该对象?', '提示', {confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'}).then(() => {
              this.$message({ type: 'success', message: '删除成功!'});

              tableComps.forEach(i => {
                this.tableNumberArray.forEach((ele, index) => {
                  if(i == ele.id){
                    this.tableNumberArray.splice(index, 1);
                    this.tableDrawer = false, this.settingDrawer = true;
                  }
                });
              });

              setTimeout(() => {
                console.log(this.tableNumberArray)
              }, 5000);
              
              parDom.remove();
            }).catch(() => {
              this.$message({type: 'info', message: '已取消删除'});
              console.log(this.tableNumberArray);
            });
          }
          // let grandfather = e.target.parentNode.parentNode.parentNode;
          // grandfather.remove();
          // this.$confirm('是否删除该对象?', '提示', {
          //   confirmButtonText: '确定',
          //   cancelButtonText: '取消',
          //   type: 'warning'
          // }).then(() => {
          //   this.$message({
          //     type: 'success',
          //     message: '删除成功!'
          //   });
          //   e.target.parentNode.parentNode.remove();
          // }).catch(() => {
          //   this.$message({
          //     type: 'info',
          //     message: '已取消删除'
          //   });          
          // });
        });
      }
    },
    /**
     * 初始化一个Layoutbox
    */
    InitLayoutBoxPage(){
      const Wrapper = document.querySelector("#wrapper");
      this.layoutDoms = layoutFun.menuLayout([100]);
      Wrapper.appendChild(this.layoutDoms);
      this.AddEvent(this.layoutDoms);
    },
    /**
     * 初始化一个组件框
    */
    InitComponentsPage(type, object){
      let idTime = (+new Date());
      if(type == 'table'){
        this.AddTablesArray(idTime, object);
      }else if(type == 'form'){
        this.AddFormsArray(idTime, object);
      }else if(type == 'tabs'){
        this.AddTabsArray(idTime, object);
      }
      this.$nextTick(()=>{
        let dom = layoutFun.componentsDom({
          type: type, // 使用的组件类型
          refs: this.$refs, // 当前库存区所有的组件
          id: object.id
        });
        this.layoutDoms.querySelector(".layout-box-kids").appendChild(dom);
        this.AddEvent(dom);
        this.InitSortTabs();
      });
    },
    /**
     * 改变上传文件
    */
    ChangeFiles(e){
      if(e.target.files[0]){
        this.readFiles(e.target.files[0]);
      }
    },
    /**
     * 上传读取文件
    */
    uploadFiles(e){
      this.$refs.files.click();
    },
    /**
     * 拖入读取文件
    */
    OnDropFiles(e){
      e.preventDefault();
      let file = e.dataTransfer.files[0];
      this.readFiles(file);
    },
    /**
     * 读取文件
    */
    readFiles(file){
      let reader = new FileReader();
      let res = {};
      reader.onload = (evt)=>{
        if(file.type.indexOf('xml') >= 0){
          // 清除wrapper
          document.getElementById("wrapper").innerHTML = "";
          const xml = this.X2JS.xml2js(evt.target.result);
          console.log("xml", xml);
          // 反压缩
          // console.log($.format(this.X2JS.js2xml(xml), {method: 'xml'}))
          res = layoutFun.parseFileXml({
            xmlJson: xml,
            xml: evt.target.result,
            global: this.globalSettingObj
          });
          // console.log(res, res.inputsArray);
          this.InitLayoutBoxPage();
          if(res.inputsArray){
            this.InitComponentsPage('form', res.inputsArray);
          }
          if(res.tableArray){
            this.InitComponentsPage('table', res.tableArray);
          }
          if(res.tabsArray){
            this.InitComponentsPage('tabs', res.tabsArray);
          }
        }else{
          if(evt.target.result.indexOf("=") >= 0){
            let properties = layoutFun.parseFileProperties(evt.target.result);
            console.log(properties)
            this.Internationalization(properties);
          }
        }
      }
      reader.readAsText(file, "UTF-8");
    },
    /**
     * 国际化
    */
    Internationalization(properties){
      this.globalSettingObj.pageZh = properties[this.globalSettingObj.page];
      this.tableNumberArray.forEach(element => {
        element.columns.forEach(col => {
          col.label = properties[col.prop];
        });
      });

      this.formNumberArray.forEach(element => {
        element.forms.forEach(col => {
          col.label = properties[col.field];
        });
      });

      this.tabsNumberArray.forEach(element => {
        element.tabs.forEach(tab => {
          tab.tabsLabel = properties[tab.tabsPorp];
          tab.columns && tab.columns.forEach(col => {
            col.label = properties[col.prop];
          });
        });
      });
    },
    /**
     * 清除所有的on class
    */
    ClearAllActionClass(){
      document.querySelectorAll(".table-components-on").forEach(element => {
        element.classList.remove('table-components-on');
      });
      document.querySelectorAll(".on").forEach(element => {
        element.classList.remove('on');
      });
    },
    OnDropLeft (e) {
      e.preventDefault();
      // this.isDragable = false; // 重置右边可拖动
      // if(e.dataTransfer.getData('TEXT').split('_')[0] == 'FromRight'){
      //   let wii = e.dataTransfer.getData('TEXT').split('_')[1]; // 哪一条
      //   let fromIndexTable = e.dataTransfer.getData('TEXT').split('_')[2]; // 来自哪个调度单
      //   let itemDom = this.dispatchDetailed[fromIndexTable].detailed.splice(wii,1)[0];
      //   this.orderDetailed.push(itemDom);
      // }
    },
    //行拖拽
    tableDispatchDroping () {
      // Array.from(document.querySelectorAll("#" + this.options.pageCustomer + " .orders-box .el-table__body-wrapper tr")).forEach(element => {
      //   $(element).attr('draggable', 'true').on({
      //     'mouseover': (event) => {
      //       this.isDragable = true;
      //     },
      //     'mouseout': (event) => {
      //       this.isDragable = false;
      //     }
      //   })
      // });

      // for(let i=0; i<this.dispatchDetailed.length; i++){
      //   let table = this.$refs['rightTable'+i][0].$el;
      //   $(table).on('dragstart', (event) => {
      //     let index = null
      //     if(this.dispatchDetailed[i].detailed.length > 0){
      //       index = Array.from(table.querySelectorAll('.el-table__body-wrapper tr')).indexOf(event.target);
      //     }
      //     event.originalEvent.dataTransfer.setData('TEXT', "FromRight_"+index+"_"+i)
      //   })
      // }

      // var tbody = Array.from(document.querySelectorAll(".orders-box .el-table__body-wrapper tbody"));
      // var _this = this;
      // tbody.forEach((element, index) => {
      //   if(element.className.indexOf('dragable') >= 0){
      //     tbody.splice(index, 1);
      //   }
      // });
      // // console.log(tbody)
      // for(var table of tbody){
      //   table.classList.add("dragable");
      //   let drag = Sortable.create(table, {
      //     animation: 0,
      //     delay: 0,
      //     group: "article",
      //     ghostClass: "ghost",
      //     forceFallback: true,
      //     // fallbackClass: "",
      //     // chosenClass: "chosen",  // 被选中项的css 类名
      //     // dragClass: "drag",  // 正在被拖拽中的css类名
      //     sort: false,
      //     onMove: function (evt) {
      //       // console.log(evt)
      //     },
      //     onAdd: function (evt) {
      //       _this.changeDragEndData(evt);
      //     },
      //     onStart: (evt) => {
      //       _this.changeMoveDomStyle(evt);
      //     }
      //   });
      // }
    },
    /**
     * 初始化排序
    */
    InitSortTabs(){
      let _this = this;
      Array.from(document.querySelector("#wrapper").querySelectorAll('.el-tabs__nav')).forEach(element => {
        new Sortable(element, {
            animation: 150,
            ghostClass: 'blue-background-class',
            onMove: function (evt) {
              console.log("onMove",evt)
            },
            onAdd: function (evt) {
              console.log("onAdd",evt)
            },
            onEnd: function (evt) {
              console.log("onEnd", evt, evt.oldIndex, evt.newIndex)
              console.log(_this.common.FindAncestorsElement(evt.target, "layout-components-box"))
              let dom = _this.common.FindAncestorsElement(evt.target, "layout-components-box");
              let comType = dom.dataset.componentstype;
              let tabswhich = dom.dataset.tabswhich;
              if(comType == "tabs"){
                let tab = _this.common.FindArrayObject(tabswhich, _this.tabsNumberArray);
                console.log("tab", tab.tabs)
                let array = tab.tabs;
                array[evt.oldIndex] = array.splice(evt.newIndex, 1, array[evt.oldIndex])[0];
                console.log("array", array)
              }
            },
            onStart: (evt) => {
              console.log("onStart",evt)
            }
        });
      });
      
      Array.from(document.querySelector("#wrapper").querySelectorAll('thead tr')).forEach(element => {
        new Sortable(element, {
            animation: 150,
            ghostClass: 'blue-background-class',
            onMove: function (evt) {
              console.log("onMove",evt)
            },
            onAdd: function (evt) {
              console.log("onAdd",evt)
            },
            onEnd: function (evt) {
              console.log("onEnd", evt, evt.oldIndex, evt.newIndex)
            },
            onStart: (evt) => {
              console.log("onStart",evt)
            }
        });
      });
    },
    IninFormSortable(){
      
      // Array.from(document.querySelectorAll('.el-form[data-type="form"]')).forEach(element => {
      //   new Sortable(element, {
      //       animation: 150,
      //       ghostClass: 'blue-background-class',
      //       onMove: function (evt) {
      //         console.log("onMove",evt)
      //       },
      //       onAdd: function (evt) {
      //         console.log("onAdd",evt)
      //       },
      //       onEnd: function (evt) {
      //         console.log("onEnd", evt)
      //       },
      //       onStart: (evt) => {
      //         console.log("onStart",evt)
      //       }
      //   });
      // });
    }
  },
  mounted(){
    // 工作台颜色配置
    document.querySelector("#uploadfiles").addEventListener("drop",(e)=>{e.preventDefault();});
    document.querySelector("#uploadfiles").addEventListener("dragleave",(e)=>{e.preventDefault();});
    document.querySelector("#uploadfiles").addEventListener("dragover",(e)=>{e.preventDefault();});
    document.querySelector("#uploadfiles").addEventListener("dragenter",(e)=>{e.preventDefault();});

  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
#home{
  width: 100%;
  height: 100%;
  .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
    margin-bottom: 5px;
  }
  form[data-type='form']{
    .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
      margin: 15px 10px;
    }
  }
  .line.el-col.el-col-2{
    text-align: center;
  }
  .keywords-header{
    margin-bottom: 20px;
    .keywords-header-btns{
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
    }
  }
  .keywords-footer{
    height: 400px;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .layout-bar{
    display: flex;
    align-items: center;
  }
  .layout-bar-btn{
    margin-left: 20px;
    height: 27px;
    line-height: 30px;
  }
  #wrapper{
    width: 100%;
    min-height: 100%;
    box-sizing: border-box;
    position: relative;
    padding: 20px 0 10px 0;
    -moz-user-select:none;
    -webkit-user-select:none;
    user-select:none;
    .el-form-item.el-form-item--small{
      width: 200px;
      margin: 0 0 0;
      position: absolute;
      box-sizing: border-box;
      transition: all 300ms;
    }
    .el-date-editor.el-input, .el-date-editor.el-input__inner{
      width: 100%;
    }
  }
  .el-header{
    background-color: #2b3346;
    color: #ffffff;
    justify-content: space-between;
    display: flex;
    align-items: center;
  }
  .el-aside{
    background-color:#545c64;
  }
  .el-main{
    padding: 0;
    margin: 0;
    background: #e4f2ff;
  }
  #el-container{
    height:100%;
    .el-container{
      height:calc(100% - 60px);
    }
  }
  #left-menu{
    overflow-x: hidden;
    overflow-y: auto;
  }
  .item{
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
  }
  .drawer-box{
    margin: 0 5px;
    height: calc(100% - 40px);
    padding-top: 20px;
    box-sizing: border-box;
    .el-tabs{
      height: 100%;
      overflow: hidden;
    }
  }
  .field-btns{
    width: 100%;
    height: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .el-col{
    text-align: center;
  }
  .check-xml-box{
    min-height: 300px;
  }
  .margin-top-hr{
    margin-top: 20px;
  }
}
#app{
  .el-main{
    width: calc(100% - 600px);
  }
  #workspace{
    width: 372px;
    box-sizing: border-box;
    border-left: 1px solid #ccc;
    overflow-x: hidden;
    .workspace-header{
      height: 40px;
      line-height: 40px;
      box-sizing: border-box;
      padding: 0 20px;
      border-bottom: 1px solid #ccc;
    }
  }
}
#app #page-type{
  label{
    display: inline-block;
    margin: 5px 0 5px 5px;
  }
}
#app {
  #uploadfiles{
    height: 100%;
    line-height: 60px;
    padding: 0 20px;
    border-left: 1px solid #999;
    border-right: 1px solid #999;
    cursor: pointer;
  }
}
</style>

